<template>
  <!-- animate__animated animate__fadeOutRight -->
  <transition class="breadcrumb" leave-active-class="leave-animation">
    <span v-show="isShow">{{ text }}</span>
  </transition>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const isShow = ref<boolean>();
const text = ref<string>(route.meta.breadcrumb as string);

watch(route, newValue => {
  isShow.value = false;
  setTimeout(() => {
    text.value = <string>newValue.meta.breadcrumb ? <string>route.meta.breadcrumb : '';
    isShow.value = true;
  }, 200);
});
</script>

<style lang="scss" scoped>
.breadcrumb {
  font-size: 16px;
  letter-spacing: 2px;
  transition: all 0.3s;
}
.leave-animation {
  margin-left: 16px;
  opacity: 0;
  transition: all 0.3s;
}
</style>
